<template>
	<div class="person">
		<h2>{{ name }}</h2>
		<h2>{{ age }}</h2>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
	</div>
</template>
<script lang="ts" setup>
import { toRefs, toRef,reactive} from 'vue';

let person = reactive({ name: '张三', age: 18 })
let {name, age} = toRefs(person)
//toRef 只能一个一个取。
let n = toRef(person,'name');

function changeName(){
	name.value += '^';
}

function changeAge(){
	age.value += 1;
}
</script>
<style>
.person {
	padding: 10px;
}
</style>
